<template>
<el-drawer
  title="预付卡报备详情"
  :visible.sync="drawer"
  :before-close="handleClose"
  size="80%"
  >
  <div class="view-wrapper">
    <div class="inviteCode">
      <div class="detail">
        <div class="detail_title">发卡信息</div>
        <div class="detail_box">
          <div class="detail_box_l">
            <img
              class="card_img"
              src="@/static/gudongka.png"
              alt=""
              v-if="info.cardType == 1"
            />
            <img
              class="card_img"
              src="@/static/jicika.png"
              alt=""
              v-if="info.cardType == 2"
            />
            <img
              class="card_img"
              src="@/static/jifeika.png"
              alt=""
              v-if="info.cardType == 3"
            />
            <img
              class="card_img"
              src="@/static/keshika.png"
              alt=""
              v-if="info.cardType == 4"
            />
            <img
              class="card_img"
              :src="httpImg+info.individuationCardCover"
              alt=""
              v-if="info.cardType == 5&&info.individuationCardCover!=''"
            />
            <img
              class="card_img"
              src="@/static/jishi.png"
              alt=""
              v-if="info.cardType == 9"
            />
            <img class="card_img" src="@/static/tiyanka.png" alt="" v-if="info.cardType == 5&&info.individuationCardCover==''">
            <div class="card_box">
              <div class="card_box_head">
                <div class="head_l">
                  <img class="shop_icon" :src="info.shopIcon? info.shopIcon: require('@/static/user-ico.png') " alt="" />
                  <div class="shop_name">{{ info.shopName }}</div>
                </div>
                <img class="head_r" src="@/static/erCode.png" alt="" />
              </div>
              <div class="card_name ellipseHide">{{ info.name }}</div>
              <!-- <div class="card_worth" v-if="info.cardType==1||info.cardType==3">
                          <div class="card_worth_txt">￥</div>
                          <div class="card_worth_num">{{info.balanceMoney}}</div>
                      </div>
                      <div class="card_worth" v-if="info.cardType==2">
                          <div class="card_worth_num">{{info.usable}}</div>
                          <div class="card_worth_txt2">次</div>
                      </div>
                      <div class="card_worth" v-if="info.cardType==4">
                         <div class="card_worth_num">{{info.usable}}</div>
                          <div class="card_worth_txt2">课时</div>
                      </div> -->
              <div class="card_time">卡有效期：{{ info.validityTypeDict }}</div>
            </div>
          </div>
          <div class="detail_box_r">
            <div class="detail_box_rbox marb">
              <p>卡编号：</p>
              <div>{{ info.id }}</div>
            </div>
            <div class="detail_box_rbox marb">
              <p>卡名称：</p>
              <div>{{ info.name }}</div>
            </div>
            <div class="detail_box_rbox marb">
              <p>卡类型：</p>
              <div>{{ info.cardTypeDict }}</div>
            </div>
            <div class="detail_box_rbox">
              <p>有效期：</p>
              <!-- <div>{{ info.validityTypeDict }}</div> -->
              <div v-if="info.validityType == 19">{{info.usableCount}}天</div>
              <div v-else>{{info.validityTypeDict}}</div>
            </div>
            <div class="detail_box_rbox">
              <p>发售金额：</p>
              <div>¥{{ info.buyMoney }}</div>
            </div>
            <div class="detail_box_rbox">
              <p>计划发售数量：</p>
              <div>{{ info.issueTotal }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail" style="margin-bottom: 40px">
        <div class="detail_title">存管账户</div>
        <div class="detail_txtbox">
          <div>存管模式：{{ info.depositoryMode }}</div>
          <div>开户名称：{{ info.accountName }}</div>
          <div>开户银行：{{ info.bankName }}</div>
          <div>银行账号：{{ info.accountNo }}</div>
         <!-- 
          <div>
            资金存管协议：<span class="scolor"
              ><a :href="$IMG_URL + info.fundDepositoryAgreement"
                >资金存管协议.pdf</a
              ></span
            >
          </div> -->
        </div>
      </div>
      <!-- <div class="detail">
        <div class="detail_title">报备材料</div>
        <div class="detail_txtbox">
          <div>
            单用途卡业务管理制度：<span class="scolor"
              ><a :href="$IMG_URL + info.cardManagement"
                >单用途卡业务管理制度.pdf</a
              ></span
            >
          </div>
          <div>
            单用途卡购卡章程：<span class="scolor"
              ><a :href="$IMG_URL + info.buyCardBylaws"
                >单用途卡购卡章程.pdf</a
              ></span
            >
          </div>
          <div>
            单用途卡购卡协议：<span class="scolor"
              ><a :href="$IMG_URL + info.buyCardProtocol"
                >单用途卡购卡协议.pdf</a
              ></span
            >
          </div>
          <div>
            资金管理制度：<span class="scolor"
              ><a :href="$IMG_URL + info.fundManagement"
                >资金管理制度.pdf</a
              ></span
            >
          </div>
        </div>
      </div> -->
      <div class="back">
        <el-button size="medium" @click="handleClose">返回</el-button>
      </div>
    </div>
  </div>
  </el-drawer>
</template>
<script>
// import { cardDetail } from "@/api/merchants";
// import clip from '@/utils/clipboard' // use clipboard directly
import { getAssetId } from "@/api/insuranceUnderwriting";
import clipboard from "@/directive/clipboard/index.js"; // use clipboard by v-directive
export default {

  directives: {
    clipboard,
  },
  
  data() {
    return {
      drawer:false,
      merchantId: "",
      assetId: "",
      info: {},
      httpImg: this.$IMG_URL,
    };
  },
  mounted() {
    // let query = this.$route.query;
    // this.merchantId = query.merchantId;
    // this.assetId = query.assetId;
  },
  methods: {
    show(id){
      this.drawer = true
      this.assetId = id
      this.getDetail();

    },
    back() {
      this.$router.go(-1);
      //   this.$router.push({
      //     path: "/merchants/merchants-detail",
      //     query: {
      //       id: this.merchantId,
      //       activeName: 'third',
      //     },
      //   });
    },
    handleClose(){
      this.drawer = false
      this.info = {}
    },
    //获取基本信息
    getDetail() {
      this.loading = true;
      getAssetId(this.assetId)
        .then((res) => {
          console.log("获取详情", res);
             const { result } = res;
            
              result.shopIcon =
              result.shopIcon != ""
              ? this.$IMG_URL + result.shopIcon
              : result.shopIcon;
              
               this.info = result;
          console.log(this.$IMG_URL + result.fundDepositoryAgreement);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.inviteCode {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 0;
}
div {
  box-sizing: border-box;
}
.detail {
  padding: 0 5px;
  margin-bottom: 20px;
}
.detail_title {
  font-size: 20px;
  color: #000;
  font-weight: 600;
  border-left: 5px solid #1890ff;
  padding-left: 10px;
}
.detail_box {
  display: flex;
  align-items: center;
  padding: 20px;
}
.detail_box_l {
  width: 333px;
  height: 176px;
  position: relative;
  margin-right: 40px;
}
.card_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.card_box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  padding: 0 16px;
}
.card_box_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
}
.head_l {
  display: flex;
  align-items: center;
  width: 270px;
}
.shop_icon {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  margin-right: 13px;
}
.shop_name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #fff;
}
.head_r {
  width: 24px;
  height: 24px;
}
.ellipseHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card_name {
  text-align: center;
  font-size: 22px;
  color: #ffffff;
  font-weight: bold;
  margin-top: 20px;
}
.card_worth {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
}
.card_worth_txt {
  font-size: 16px;
  color: #fff;
  margin-bottom: 2px;
}
.card_worth_txt2 {
  font-size: 14px;
  color: #fff;
  margin-bottom: 3px;
  margin-left: 5px;
}
.card_worth_num {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.card_time {
  font-size: 12px;
  color: #fff;
  margin-top: 50px;
}
.detail_box_r {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.detail_box_rbox {
  width: calc(100% / 3);
  color: #333;
  font-size: 16px;
}
.detail_box_rbox p {
  margin-bottom: 10px;
}
.marb {
  margin-bottom: 20px;
}
.detail_txtbox {
  margin: 20px 0;
  padding-left: 32px;
}
.detail_txtbox div {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}
.scolor {
  color: #1890ff;
  cursor: pointer;
}
.scolor:hover {
  opacity: 0.8;
}
.back {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 50px 0;
}
</style>